<template>
  <div class="container evaluat">
    <ul class="evaluation_list">
      <li class="eva_item"
          v-for="(item, i) in evaluat_list"
          :key="i">
        <div class="userInfo clearfix">
          <div class="left clearfix">
            <div class="user_logo">
              <img :src="item.headimgurl==''?defaultImg:imgUrl+item.headimgurl"
                   alt
                   mode="widthFix"
                   class="img">
            </div>
            <div class="user_board">
              <h3>{{item.user_name}} {{item.nickname}}</h3>
              <!-- 时间 -->
              <!-- <div class="right"
                   v-if="item.time">{{item.time}}</div> -->
              <div class="score">
                <!-- 星级 -->
                <img v-if="item.star>=1"
                     src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png"
                     mode="widthFix"
                     class="star">
                <img v-if="item.star>=2"
                     src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png"
                     mode="widthFix"
                     class="star">
                <img v-if="item.star>=3"
                     src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png"
                     mode="widthFix"
                     class="star">
                <img v-if="item.star>=4"
                     src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png"
                     mode="widthFix"
                     class="star">
                <img v-if="item.star>=5"
                     src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png"
                     mode="widthFix"
                     class="star">
                <!-- <span class="num">{{item.star}}分</span> -->
              </div>
            </div>
          </div>

        </div>
        <div class="eva_main">
          <div class="eva_content"
               :class="item.image_arr[0]?'active':''">{{item.contents}} {{item.comment}}</div>
          <ul class="img_list clearfix"
              v-if="item.image_arr[0]">
            <li class="img_item"
                @click="image_preview()">
              <img :src="imgUrl+item.image_arr[0]"
                   v-if="imgUrl&&item.image_arr[0]"
                   alt
                   mode="widthFix"
                   class="img">
              <span class="tip">{{item.image_arr.length}}张</span>
            </li>
          </ul>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
// 父组件在子组件通过evaluat_list进行传值
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response
    };
  },
  methods: {
    image_preview (item, index) {
      let arr = item.image_arr,
        arr1 = [];
      arr.forEach(val => {
        val = this.imgUrl + val;
        arr1.push(val);
      });
      wx.previewImage({
        current: arr1[index], // 当前显示图片的http链接
        urls: arr1 // 需要预览的图片http链接列表
      });
    }
  },
  props: {
    evaluat_list: ""
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  margin-top: 0 !important;
  .top {
    margin: 0px 12px;
    padding-bottom: 4px;
    .top-item {
      width: 72px;
      height: 24px;
      background: rgba(247, 247, 247, 1);
      border-radius: 13px;
      line-height: 24px;
      float: left;
      margin-right: 21px;
      box-sizing: border-box;
      text-align: center;
      color: rgba(102, 102, 102, 1);
    }
    .active {
      background: rgba(255, 115, 164, 0.1);
      border: 1px solid rgba(255, 115, 164, 1);
      color: rgba(255, 115, 164, 1);
      line-height: 22px;
    }
  }
  .evaluation_list {
    background: #fff;
    .eva_item {
      padding: 12px 0;
      margin: 0 12px;
      border-bottom: solid 1px #f5f5f5;
      .userInfo {
        position: relative;
        .left {
          display: flex;
          align-items: center;
          .user_logo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #cccccc;
            .img {
              width: 100%;
              border-radius: 50%;
            }
          }
          .user_board {
            float: left;
            margin-left: 6px;
            h3 {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              color: #333;
              margin-bottom: 5px;
            }
            .right {
              font-size: 10px;
              margin-top: 2px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
          }
        }

        .score {
          text-align: right;
          .star {
            width: 10px;
            height: 10px;
            padding: 0;
            vertical-align: top;
          }
          .num {
            font-size: 10px;
            color: rgba(255, 147, 69, 1);
            margin-left: 3px;
            vertical-align: top;
          }
        }
      }
      .eva_content {
        font-size: 14px;
        color: rgba(136, 136, 136, 1);
        line-height: 20px;
        flex: 1;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        &.active {
          -webkit-line-clamp: 3;
          line-clamp: 3;
        }
      }
      .eva_main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 12px;
      }
      .img_list {
        width: 60px;
        height: 60px;
        background: rgba(230, 230, 230, 1);
        border-radius: 4px;
        overflow: hidden;
        margin-left: 12px;
        .img_item {
          width: 60px;
          height: 60px;

          position: relative;
          overflow: hidden;
          .img {
            width: 100%;
            height: auto;
          }
          .tip {
            height: 14px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 7px;
            line-height: 14px;
            padding: 0 4px;
            font-family: "PingFangSC-Medium";
            color: #fff;
            position: absolute;
            right: 4px;
            bottom: 4px;
            z-index: 999;
            font-size: 10px;
          }
        }
      }
    }
    .like {
      text-align: right;
      .img {
        width: 15px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
      }
    }
  }
}
</style>

